<template>
	<view>
		<view class="content">
			<mu-col span="12" lg="4" sm="6">
				<mu-date-input type="dateTime" v-model="time" @change="getTime()" label="日记时间:" label-float full-width
					no-display>
				</mu-date-input>
			</mu-col>
			<mu-col span="12" lg="4" sm="6">
				<mu-select label="类型:" v-model="AccountType" full-width @change="getType">
					<mu-option v-for="item,index in Type" :key="item" :label="item" :value="item">
					</mu-option>
				</mu-select>
			</mu-col>
			<view style="padding: 16rpx;">
				<mu-text-field v-model="message" label="用途/来源: " prefix="#" label-float @input="getmessage"></mu-text-field>
				<br />
			</view>
			<view style="padding: 16rpx;">
				<mu-text-field v-model="Amount" label="金额: " prefix="￥" label-float @input="getAmount"></mu-text-field>
				<br />
			</view>
			<view class="btn">
				<mu-button color="#1B9ADC" ripple round @click="storeAccount">
					记账
				</mu-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'

	export default {
		name: "addAccount",
		computed: {
			...mapState(['Dliary'])
		},
		data() {
			return {
				Type: [
					'支出', '收入'
				],
				time: undefined,
				AccountType: '',
				// 金额
				Amount: '',
				message:'' // 用途
			};
		},
		methods: {
			// 标准时间转换
			DateType(date) {
				var d = new Date(date);
				return (d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours());
			},
			// 获取时间
			getTime() {
				console.log(this.DateType(this.time)); // 标准时间转换
			},
			// 获取类型
			getType() {
				console.log(this.AccountType);
			},
			// 获取金额
			getAmount() {
				console.log(this.Amount);
			},
			// 获取支出收入方向
			getmessage(){
				console.log(this.message);
			},
			// 清除输入框内容
			clsInput() {
				this.time = '';
				this.AccountType = '';
				this.Amount = '';
				this.message='';
			},
			// 记账
			storeAccount() {
				if (this.AccountType!='收入') this.Amount= this.Amount*(-1);
				var data = {
					time: this.DateType(this.time),
					type: this.AccountType,
					Amount: this.Amount,
					message:this.message
				};
				this.$store.commit('setAccount', data);
				uni.showToast({
					title: '记账成功~',
					icon: 'none'
				}).then(res => {
					this.clsInput();
				})
			}
		}
	}
</script>

<style lang="less">
	.content {
		.btn {
			display: flex;
			justify-content: center;

		}
	}
</style>
